import React, {PureComponent} from "react";
import {connect} from "react-redux";
import {Modal, Table, Tabs} from "antd";
import FormEditor from '../../components/FormEditor';
import {hideEdit} from "./actions";
import {tableProps} from "../../lib/ui";

const {TabPane} = Tabs;

class ModifyModal extends PureComponent {

    handleCancel = () => {
        const {dispatch} = this.props;
        dispatch(hideEdit());
    };

    render() {
        const {loading, visible, model} = this.props;
        const schema = [
            {
                title: '订单信息',
                fields: [
                    {
                        field: 'organizationName',
                        title: '所属机构',
                        readonly: true
                    }, {
                        field: 'bookNo',
                        title: '订舱号',
                        readonly: true
                    }, {
                        field: 'businessType',
                        title: '业务类型',
                        readonly: true
                    }, {
                        field: 'calculateType',
                        title: '计费方式',
                        readonly: true
                    }, {
                        field: 'pickTime',
                        title: '提货日期',
                        readonly: true
                    }, {
                        field: 'sendTime',
                        title: '发车日期',
                        readonly: true
                    }, {
                        field: 'startPlace',
                        title: '始发地',
                        readonly: true
                    }, {
                        field: 'endPlace',
                        title: '目的地',
                        readonly: true
                    }, {
                        field: 'count',
                        title: '数量',
                        readonly: true
                    }, {
                        field: 'volume',
                        title: '方数(m³)',
                        readonly: true
                    }, {
                        field: 'weight',
                        title: '毛重(KG)',
                        readonly: true
                    }, {
                        field: 'pb',
                        title: '重泡比',
                        readonly: true
                    }, {
                        field: 'volume2',
                        title: '体积重(KG)',
                        readonly: true
                    }, {
                        field: 'pickType',
                        title: '提货车型',
                        readonly: true
                    }, {
                        field: 'pickLine',
                        title: '提货线路',
                        readonly: true
                    }, {
                        field: 'deliveryType',
                        title: '派送车型',
                        readonly: true
                    }, {
                        field: 'deliveryLine',
                        title: '派送线路',
                        readonly: true
                    }, {
                        field: 'carRemark',
                        title: '车型备注',
                        readonly: true
                    }, {
                        field: 'deliveryTime',
                        title: '派送日期',
                        readonly: true
                    }, {
                        field: 'remark',
                        title: '备注',
                        readonly: true
                    }, {
                        field: 'transportFee',
                        title: '运输费(RMB)',
                        readonly: true
                    }, {
                        field: 'pickFee',
                        title: '提货费(RMB)',
                        readonly: true
                    }, {
                        field: 'deliveryFee',
                        title: '派送费(RMB)',
                        readonly: true
                    }, {
                        field: 'totalFee',
                        title: '合计（RMB)',
                        readonly: true
                    }
                ]
            }];

        const columns = [
            {
                title: "费用科目",
                dataIndex: "feeName",
                width: "150px",
            }, {
                title: "金额",
                dataIndex: "feeCount",
                width: "150px"
            }, {
                title: "供应商",
                dataIndex: "feeCarrier",
                width: "150px"
            }, {
                title: "",
                dataIndex: ""
            }
        ];

        const feeDataSource = [];

        // 运输费
        feeDataSource.push({
            "feeName": "运输费(RMB)",
            "feeCount": model.transportFee,
            "feeCarrier": model.transportFeeCarrier || ""
        });
        feeDataSource.push({
            "feeName": "提货费(RMB)", "feeCount": model.pickFee,
            "feeCarrier": model.pickFeeCarrier || ""
        });
        feeDataSource.push({
            "feeName": "派送费(RMB)", "feeCount": model.deliveryFee,
            "feeCarrier": model.deliveryFeeCarrier || ""
        });

        return (
            <Modal
                title="详情"
                visible={visible}
                onCancel={this.handleCancel}
                confirmLoading={loading}
                footer={null}
                width="80%"
            >
                <Tabs defaultActiveKey="1">
                    <TabPane tab="订单详情" key="1">
                        <FormEditor
                            schema={schema}
                            column={3}
                            defaultReadonly={false}
                            showActionBar={false}
                            defaultValues={model}
                            wrappedComponentRef={inst => (this.formEditor = inst)}
                        />
                    </TabPane>
                    <TabPane tab="应付详情" key="2">
                        <Table
                            {...tableProps}
                            columns={columns}
                            dataSource={feeDataSource}
                            loading={loading}
                        />
                    </TabPane>
                </Tabs>
            </Modal>
        );
    }
}

const mapStateToProps = state => {
    return {
        ...state.hisGhOrderPayable.modify
    };
};


export default connect(mapStateToProps)(ModifyModal);
